<template>
  <div class="user_update">
    <center>
      <van-image
        v-if="user.avatar_url"
        round
        fit="cover"
        :src="user.avatar_url"
        width="150px"
        height="150px"
      />
    </center>
    <van-cell
      title="昵称"
      :value="user.nickname"
      @click="nicknameShow = true"
      is-link
    />
    <van-cell title="头像" is-link>
      <template #value>
        <van-image
          v-if="user.avatar_url"
          round
          fit="cover"
          :src="user.avatar_url"
          width="50px"
          height="50px"
        />
        <span v-else>无</span>
      </template>
    </van-cell>
    <van-cell
      title="密码"
      value="******"
      @click="passwordShow = true"
      is-link
    />
    <van-cell title="地址" @click="address" is-link />
  </div>

  <van-dialog
    title="修改昵称"
    v-model:show="nicknameShow"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="up_userinfo">
      <van-field placeholder="昵称" v-model="up_user.nickname" maxlength="20" />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>
  <van-dialog
    title="修改密码"
    v-model:show="passwordShow"
    :show-confirm-button="false"
    close-on-click-overlay
  >
    <van-form @submit="up_userinfo">
      <van-field
        v-model="up_user.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
      />
      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="dialog_button"
      >
        提交
      </van-button>
    </van-form>
  </van-dialog>
  <br /><br /><br />
  <center>
    <van-button color="red" round @click="exit">退出登录</van-button>
  </center>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      user_id: localStorage.getItem("id"),
      user_type: localStorage.getItem("user_type"),
      up_user: {},
      nicknameShow: false,
      passwordShow: false,
    };
  },
  created() {
    this.submit();
  },
  methods: {
    submit: function () {
      this.myaxios(this.host + "users/userinfo/", "get", {
        user_id: this.user_id,
        user_type: this.user_type,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.user = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    address: function () {
      this.$router.push("/address");
    },
    exit: function () {
      localStorage.removeItem("id");
      localStorage.removeItem("token");
      this.$router.push("/");
    },
    up_userinfo: function () {
      this.myaxios(this.host + "users/userinfo/", "put", {
        user_id: this.user_id,
        nickname: this.up_user.nickname,
        mobile: this.up_user.mobile,
        password: this.up_user.password,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.user = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>